<!DOCTYPE html>
<html>

<head>
    <!-- 标题及搜索关键字 -->

    <title>普通UI控件</title>
    <!--第三方lib-->
    <script type="text/javascript" src="../github_pro/mars3d-es5-example/lib/include-lib.js" libpath="../github_pro/mars3d-es5-example/"
        include="jquery,layer,toastr,font-awesome,ztree,jquery.minicolors,jedate,bootstrap,bootstrap-table,bootstrap-checkbox,bootstrap-slider,layer,haoutil,toastr,mars3d,font-awesome,localforage"></script>
    <link href="../github_pro/mars3d-es5-example/css/style.css" rel="stylesheet" />
    <style>
        .fixed-table-container tbody .selected td {
            background-color: #3f4854a9 !important;
        }
    </style>
</head>

<body class="dark">
    <div id="mars3dContainer" class="mars3d-container"></div>

    <!-- 面板 -->
    <div class="infoview" style="overflow: auto; max-height: 850px">
        <table class="mars-table">
            <tbody>
                <tr>
                    <td>简单文本：</td>
                    <td>
                        <input id="txtUrl" type="text" value="" required class="form-control" placeholder="请输入" />
                    </td>
                </tr>

                <tr>
                    <td>下拉框：</td>
                    <td>
                        <select id="txtCrs" class="selectpicker form-control">
                            <option value="" selected="selected">默认</option>
                            <option value="EPSG:3857">火星</option>
                            <option value="EPSG:4326">地球</option>
                            <option value="EPSG:4490">太阳</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td class="nametd">日期：</td>
                    <td>
                        <input type="text" class="form-control" id="txtStartTime" placeholder="YYYY-MM-DD" />
                    </td>
                </tr>

                <tr>
                    <td>滑动条：</td>
                    <td class="slider">
                        <input id="slider_brightness" type="text" data-slider-min="-0.5" data-slider-max="1.5"
                            data-slider-step="0.01" data-slider-value="-0.5" />
                    </td>
                </tr>

                <tr>
                    <td>刻度滑动条：</td>
                    <td class="slider">
                        <input id="slider_showLevel" type="text" />
                    </td>
                </tr>

                <tr>
                    <td>地图交互：</td>
                    <td>
                        <input type="text" name="" id="txtRectangle" class="form-control" value="" style="width: 150px"
                            readonly />
                        <input id="btnStartDraw" type="button" class="btn btn-primary" value="绘制"
                            onclick="onDrawExtent()" />
                        <!-- <input id="btnStartClear" type="button" class="btn btn-primary" value="清除" onclick="onClearExtent()" /> -->
                    </td>
                </tr>

                <tr>
                    <td>多选：</td>
                    <td class="slider">
                        <div class="checkbox checkbox-primary checkbox-inline">
                            <input id="showGoHome" class="styled" type="checkbox" onclick="fireStar()" />
                            <label for="showGoHome"> 火星 </label>
                        </div>

                        <div class="checkbox checkbox-primary checkbox-inline">
                            <input id="showSceneModePicker" class="styled" type="checkbox" onclick="earthStar()" />
                            <label for="showSceneModePicker"> 地球 </label>
                        </div>

                        <div class="checkbox checkbox-primary checkbox-inline">
                            <input id="showBaseLayerPicker" class="styled" type="checkbox" onclick="sunStar()" />
                            <label for="showBaseLayerPicker"> 太阳 </label>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>单选：</td>
                    <td>
                        <div class="radio radio-info radio-inline">
                            <input type="radio" id="shadingMaterials1" name="shadingMaterials" onclick="chooseStar()"
                                checked />
                            <label for="shadingMaterials1">火星</label>
                        </div>
                        <div class="radio radio-info radio-inline">
                            <input type="radio" id="shadingMaterials2" name="shadingMaterials" onclick="chooseStar()" />
                            <label for="shadingMaterials2">地球</label>
                        </div>
                        <div class="radio radio-info radio-inline">
                            <input type="radio" id="shadingMaterials3" name="shadingMaterials" onclick="chooseStar()" />
                            <label for="shadingMaterials3">太阳</label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>颜色：</td>
                    <td colspan="2">
                        <input type="text" id="txtColor" class="form-control" style="width: 100px" value="#FF0000" />
                    </td>
                </tr>

                <tr>
                    <td>弹窗：</td>
                    <td id="tdViewAdd" colspan="2" style="text-align: left">
                        <input type="button" class="btn btn-primary" value="提示信息" onclick="messageOut()" />
                        <input type="button" class="btn btn-primary" value="Notify弹窗" onclick="Warning()" />
                        <input type="button" class="btn btn-primary" value="Alert弹窗" onclick="Alert()" />
                    </td>
                </tr>

                <tr>
                    <td>进度条：</td>
                    <td id="tdViewAdd" colspan="2" style="text-align: left">
                        <input type="button" class="btn btn-primary" value="进度条" onclick="jinDuTiao()" />
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <!-- table表格控件 -->
                        <table id="listTable"></table>
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <!-- tree树控件 -->
                        <ul id="treeOverlays" class="ztree"></ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="../github_pro/mars3d-es5-example/js/common.js"></script>

    <script type="text/javascript">
        "use script"; // 开发环境建议开启严格模式
        // window.currentPath = "/example/map/create/ui/";// 当前示例的配置
        window.currentPath = "../github_pro/mars3d-es5-example/example/map/create/ui/";// 当前示例的配置


        var map // mars3d.Map三维地图对象

        // 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
        var mapOptions = {
            scene: {
                center: { lat: 31.823874, lng: 117.223976, alt: 3509, heading: 0, pitch: -90 }
            },
            control: {
                baseLayerPicker: false
            }
        }

        /**
         * 构造bloom效果对象
         * @type {mars3d.BloomEffect}
         */
        var bloomEffect

        // 事件对象，用于抛出事件给面板
        var eventTarget = new mars3d.BaseClass()

        /**
         * 初始化地图业务，生命周期钩子函数（必须）
         * 框架在地图初始化完成后自动调用该函数
         * @param {mars3d.Map} mapInstance 地图对象
         * @returns {void} 无
         */
        function onMounted(mapInstance) {
            console.log("onMounted执行了")
            map = mapInstance // 记录首次创建的map

            // 构造bloom效果 用于滑动条测试
            bloomEffect = new mars3d.effect.BloomEffect()
            map.addEffect(bloomEffect)

            eventTarget.fire("init", {
                value: 10
            })
            queryTilesetData()
        }

        /**
         * 释放当前地图业务的生命周期函数
         * @returns {void} 无
         */
        function onUnmounted() {
            console.log("onUnmounted执行了")
            map.graphicLayer.clear()
            map.removeEffect(bloomEffect, true)
            bloomEffect = null
            map = null
        }

        // 绘制矩形（演示map.js与index.vue的交互）
        function drawExtent() {
            map.graphicLayer.clear()
            // 绘制矩形
            map.graphicLayer.startDraw({
                type: "rectangle",
                style: {
                    fill: true,
                    color: "rgba(255,255,0,0.2)",
                    outline: true,
                    outlineWidth: 2,
                    outlineColor: "rgba(255,255,0,1)"
                },
                success: function (graphic) {
                    var rectangle = mars3d.PolyUtil.formatRectangle(graphic._rectangle_draw)
                    eventTarget.fire("drawExtent", { extent: JSON.stringify(rectangle) }) // 抛出事件，可以组件中去监听事件
                }
            })
        }

        // 是否运行地图鼠标交互
        function enableMapMouseController(value) {
            map.setSceneOptions({
                cameraController: {
                    enableZoom: value,
                    enableTranslate: value,
                    enableRotate: value,
                    enableTilt: value
                }
            })
        }

        // 调整亮度 （演示滑动条）
        function updateBrightness(val) {
            bloomEffect.brightness = val
        }

        // 调整对比度 （演示滑动条）
        function updateContrast(val) {
            bloomEffect.contrast = val
        }

        // 创建图层
        function createLayer(layer) {
            return mars3d.LayerUtil.create(layer)
        }

        // 数据获取
        function queryTilesetData() {
            mars3d.Util.fetchJson({ url: "../github_pro/mars3d-es5-example/config/tileset.json" })
                .then(function (arr) {
                    var modelData = arr.layers
                    eventTarget.fire("loadTypeList", { modelData })
                })
                .catch(function (error) {
                    console.log("加载JSON出错", error)
                })
        }

    </script>
    <script type="text/javascript">
        "use script" //开发环境建议开启严格模式

        var $table

        function initUI(options) {
            // 树控件
            mars3d.Util.fetchJson({ url: "../github_pro/mars3d-es5-example/config/tileset.json" })
                .then(function (data) {
                    initTree(data.layers)
                })
                .catch(function (error) {
                    console.log("加载JSON出错", error)
                })

            // eslint-disable-next-line no-undef
            jeDate("#txtStartTime", {
                theme: {
                    bgcolor: "#135b91",
                    pnColor: "#00CCFF"
                },
                format: "YYYY-MM-DD hh:mm:ss",
                zIndex: 20210825
            })
            var now = Cesium.JulianDate.toDate(map.clock.currentTime)
            $("#txtStartTime").val(now.format("yyyy-MM-dd HH:mm:ss"))

            //获取台风列表
            // mars3d.Util.fetchJson({
            //     url: "//data.mars3d.cn/file/apidemo/typhoon/list_2020.json",
            //     data: {
            //         t: new Date().getTime()
            //     }
            // })
            //     .then(function (res) {
            //         var arr = typhoon_jsons_list_default(res)
            //         //启动正在发送的台风
            //         arr.forEach((item) => {
            //             if (item.state == "start") {
            //                 item.show = true
            //                 selectOneTyphoon(item)
            //             }
            //         })
            //         showTyphoonTable(arr)
            //     })
            //     .catch(function (error) {
            //         console.log("加载JSON出错", error)
            //     })

            $("#slider_lodLevel")
                .slider({
                    id: "slider-lodLevel-internal",
                    ticks: [0, 5, 10, 15, 18, 21],
                    ticks_positions: [0, 20, 40, 60, 80, 100],
                    ticks_labels: ["0", "5", "10", "15", "18", "21"],
                    range: true,
                    value: [0, 21]
                })
                .on("slide", function () {
                    var lodLevel = $("#slider_lodLevel").slider("getValue")
                    $("#slider_showLevel").slider("setValue", lodLevel)
                })

            $("#slider_showLevel")
                .slider({
                    id: "slider-showLevel-internal",
                    ticks: [-25, 2, 4, 6, 8, 9],
                    ticks_positions: [0, 20, 40, 60, 80, 100],
                    ticks_labels: ["0", "20", "40", "60", "80", "100"],
                    range: true,
                    value: [-25, 9]
                })
                .on("change", function () {
                    updateBrightness(Number($("#slider_showLevel").val()[0] / 50))
                })

            // 调整亮度 （演示滑动条）
            $("#slider_brightness")
                .slider()
                .on("change", function () {
                    updateBrightness(Number($("#slider_brightness").val()))
                })

            $("#slider_opacity")
                .slider()
                .on("change", function () {
                    // console.log(e);
                })

            $("#txtColor").minicolors({
                position: "bottom right",
                control: "saturation",
                change: function (color, opacity) {
                    console.log(color)
                }
            })

            $("#txtCrs").change(function () {
                var txtCrs = $("#txtCrs").val()
                toastr.info(txtCrs)
            })
        }

        function fireStar() {
            if ($("#showGoHome").is(":checked")) {
                toastr.info("火星被选中了")
            }
        }

        function earthStar() {
            if ($("#showSceneModePicker").is(":checked")) {
                toastr.info("地球被选中了")
            }
        }

        function sunStar() {
            if ($("#showBaseLayerPicker").is(":checked")) {
                toastr.info("太阳被选中了")
            }
        }

        function chooseStar() {
            if ($("#shadingMaterials1").is(":checked")) {
                toastr.info("火星被选中了")
            } else if ($("#shadingMaterials2").is(":checked")) {
                toastr.info("地球被选中了")
            } else if ($("#shadingMaterials3").is(":checked")) {
                toastr.info("太阳被选中了")
            }
        }

        function messageOut() {
            globalMsg("展示Message信息")
        }
        function Alert() {
            globalAlert("我是Alert提示信息内容", "提示Alert标题")
        }
        function Warning() {
            globalNotify("提示Notify标题", "我是Notify提示信息内容")
        }

        function jinDuTiao() {
            haoutil.loading.show()
            setTimeout(function () {
                haoutil.loading.close()
            }, 1000)
        }

        // 瓦片数据的矩形区域范围
        function onDrawExtent() {
            drawExtent()
        }
        eventTarget.on("drawExtent", function (event) {
            $("#txtRectangle").val(event.extent)
        })

        //清除图层限定范围
        // function onClearExtent() {
        //   $("#txtRectangle").val("")
        //   map.graphicLayer.clear()
        // }

        //显示台风列表
        function showTyphoonTable(data) {
            $("#listTable").bootstrapTable({
                data: data,
                height: 300,
                pagination: false,
                singleSelect: false,
                checkboxHeader: false,
                columns: [
                    {
                        title: "是否显示",
                        field: "show",
                        align: "center",
                        checkbox: true,
                        with: 50
                    },
                    {
                        title: "台风编号",
                        field: "typnumber",
                        align: "center"
                    },
                    {
                        title: "台风名（中文）",
                        field: "name_cn",
                        align: "center"
                    },
                    {
                        title: "台风名（英文）",
                        field: "name_en",
                        align: "center"
                    }
                ],
                onCheck: function (row) {
                    selectOneTyphoon(row)
                },
                onUncheck: function (row) {
                    unSelectOneTyphoon(row)
                },
                onClickRow: function (row) {
                    if (typhoonListObj[row.id] && typhoonListObj[row.id].show) {
                        selectOneTyphoon(row)
                    }
                }
            })
        }

        var typhoonListObj = {}

        //取消勾选台风
        function unSelectOneTyphoon(row) {
            var typhoon = typhoonListObj[row.id]
            if (typhoon == selectTF) {
                $("#typhoonPath").hide()
            }
        }

        //勾选了台风
        function selectOneTyphoon(row) {
            $("#lblName").html("[" + row.typnumber + "]" + "" + row.name_cn)
            toastr.info(row.name_cn + "台风要来啦，大家要注意安全！")
        }

        var selectTF

        function getHeight() {
            return $(window).height() - 440
        }

        function typhoon_jsons_list_default(data) {
            var arr = []
            data.typhoonList.forEach((item) => {
                arr.push({
                    id: item[0],
                    name_en: item[1],
                    name_cn: item[2],
                    typnumber: item[3],
                    state: item[7]
                })
            })
            return arr
        }

        //转换数据,将后端接口数据转换为需要的格式
        function conversionPathData(oldData) {
            var path = []
            oldData[8].forEach((message) => {
                var circle7
                var circle10
                var circle12
                message[10].forEach((level) => {
                    var radiusObj = {
                        speed: level[0],
                        radius1: level[1],
                        radius2: level[2],
                        radius3: level[3],
                        radius4: level[4]
                    }

                    if (level[0] == "30KTS") {
                        circle7 = radiusObj
                    } else if (level[0] == "50KTS") {
                        circle10 = radiusObj
                    } else if (level[0] == "64KTS") {
                        circle12 = radiusObj
                    } else {
                        console.log("未处理风圈", radiusObj)
                    }
                })
            })
        }

        //===========================树控件处理============================
        var layers = []
        var layersObj = {}

        // function initTree(layers) {
        //     //初始化树
        //     var setting = {
        //         check: {
        //             enable: true
        //         },
        //         data: {
        //             simpleData: {
        //                 enable: true
        //             }
        //         },
        //         callback: {
        //             onCheck: treeOverlays_onCheck,
        //             onDblClick: treeOverlays_onDblClick
        //         }
        //     }

        //     var zNodes = []
        //     for (var i = layers.length - 1; i >= 0; i--) {
        //         var layerOptions = layers[i]
        //         layerOptions.flyTo = true
        //         var layer = mars3d.LayerUtil.create(layerOptions) //创建图层

        //         var node = _getNodeConfig(layer)
        //         if (node) {
        //             zNodes.push(node)
        //         }
        //     }
        //     $.fn.zTree.init($("#treeOverlays"), setting, zNodes)
        // }

        // function _getNodeConfig(layer) {
        //     if (layer == null || layer.isPrivate) {
        //         return
        //     }

        //     var item = layer.options

        //     if (item.name == "未命名") {
        //         return
        //     }

        //     var node = {
        //         id: layer.id,
        //         pId: layer.pid,
        //         name: layer.name
        //     }

        //     if (layer.hasEmptyGroup) {
        //         //空数组
        //         // node.icon = "/lib/jquery/ztree/css/mars/images/folder.png"
        //         node.icon = "../github_pro/mars3d-es5-example/lib/jquery/ztree/css/mars/images/folder.png"
        //         node.open = item.open == null ? true : item.open
        //         layersObj[node.id] = layer
        //     } else if (layer.hasChildLayer) {
        //         //有子节点的数组
        //         node.icon = "../github_pro/mars3d-es5-example/lib/jquery/ztree/css/mars/images/layerGroup.png"
        //         node.open = item.open == null ? true : item.open
        //         layersObj[node.id] = layer
        //     } else {
        //         node.icon = "../github_pro/mars3d-es5-example/lib/jquery/ztree/css/mars/images/layer.png"
        //         node.checked = layer.isAdded && layer.show

        //         if (layer.parent) {
        //             node._parentId = layer.parent.id
        //         }

        //         //记录图层
        //         layersObj[node.id] = layer
        //     }
        //     return node
        // }

        // function treeOverlays_onCheck(e, treeId, chktreeNode) {
        //     var treeObj = $.fn.zTree.getZTreeObj(treeId)
        //     //获得所有改变check状态的节点
        //     var changedNodes = treeObj.getChangeCheckedNodes()

        //     haoutil.array.remove(changedNodes, chktreeNode)
        //     changedNodes.push(chktreeNode)

        //     for (var i = changedNodes.length - 1; i >= 0; i--) {
        //         var treeNode = changedNodes[i]
        //         treeNode.checkedOld = treeNode.checked

        //         if (treeNode.check_Child_State == 1) {
        //             // 0:无子节点被勾选,  1:部分子节点被勾选,  2:全部子节点被勾选, -1:不存在子节点 或 子节点全部设置为 nocheck = true
        //             continue
        //         }

        //         var layer = layersObj[treeNode.id]
        //         if (layer == null) {
        //             continue
        //         }

        //         //显示隐藏透明度设置view
        //         if (treeNode.checked) {
        //             $("#" + treeNode.tId + "_range").show()
        //         } else {
        //             $("#" + treeNode.tId + "_range").hide()
        //         }

        //         updateLayerShow(layer, treeNode.checked)
        //     }
        // }

        // //更新图层:显示隐藏状态
        // function updateLayerShow(layer, show) {
        //     layer.show = show

        //     if (show) {
        //         if (!layer.isAdded) {
        //             map.addLayer(layer)
        //         }
        //         // layer.flyTo();
        //     } else {
        //         if (layer.isAdded) {
        //             map.removeLayer(layer)
        //         }
        //     }
        // }

        // function treeOverlays_onDblClick(event, treeId, treeNode) {
        //     if (treeNode == null || treeNode.id == null) {
        //         return
        //     }
        //     var layer = layersObj[treeNode.id]
        //     if (layer == null || !layer.layer) {
        //         haoutil.msg("图层尚未加载，需要加载后才能定位！")
        //         return
        //     }

        //     layer.flyTo()
        // }
    </script>
</body>

</html>